<template>
  <div><h3>养只档案</h3></div>
  <el-row :gutter="1">
    <el-col :span="7">
      <el-form-item label="可视耳号">
        <el-input
          v-model="form.proEarBegin"
          placeholder="请输入"
          style="width: 70px"
        />
      </el-form-item>
      <el-form-item label="月龄">
        <el-input
          v-model="form.departmentName"
          placeholder="请输入"
          style="width: 70px"
        />—<el-input
          v-model="form.departmentName"
          placeholder="请输入"
          style="width: 70px"
        />
      </el-form-item>
      <el-form-item label="生产等级" style="width: 170px">
        <el-select v-model="form.departmentTypeId" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="母耳号">
        <el-input
          v-model="form.moEarNumber"
          placeholder="请输入"
          style="width: 70px"
        />
      </el-form-item>
    </el-col>
    <el-col :span="5">
      <el-form-item label="电子耳标号">
        <el-input
          v-model="form.electronicEarTag"
          placeholder="请输入"
          style="width: 70px"
        />
      </el-form-item>
      <el-form-item label="生长阶段" style="width: 170px">
        <el-select v-model="form.stage" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="销售等级" style="width: 170px">
        <el-select v-model="form.departmentTypeId" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="在场状态" style="width: 170px">
        <el-select v-model="form.departmentTypeId" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="品种" style="width: 140px">
        <el-select v-model="form.varietyId" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="位置" style="width: 120px">
        <el-select v-model="form.cottagesId" placeholder="栋舍">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" /> </el-select
        >—
        <el-select v-model="form.fieIdId" placeholder="栏位">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="繁殖状态" style="width: 170px">
        <el-select v-model="form.departmentTypeId" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="性别" style="width: 130px">
        <el-select v-model="form.gender" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="养只类型" style="width: 170px">
        <el-select v-model="form.departmentTypeId" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="繁殖状态天数">
        <el-input
          v-model="form.departmentName"
          placeholder="请输入"
          style="width: 70px"
        />—<el-input
          v-model="form.departmentName"
          placeholder="请输入"
          style="width: 70px"
        />
      </el-form-item>
    </el-col>
    <el-col :span="7">
      <el-form-item label="出生日期">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          style="width: 180px"
          end-placeholder="结束日期"
          :size="size"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="基因等级" style="width: 170px">
        <el-select v-model="form.gradeId" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="父耳号">
        <el-input
          v-model="form.farEarNumber"
          placeholder="请输入"
          style="width: 70px"
        />
      </el-form-item>
    </el-col>
  </el-row>

  <!-- 查询条件：可视耳号 电子耳标号  -->
  <el-form :model="form" label-width="auto" :inline="true">
    <!-- 可视耳号 -->

    <!-- 按钮 查询 重置 -->
    <el-form-item>
      <el-button type="danger" @click="getSheep">查询</el-button>
      <el-button type="primary">重置</el-button>
      <el-button type="danger">+新增种公</el-button>
      <el-button type="danger">+新增种母</el-button>
      <el-button type="danger">+新增后裔</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column property="sleepInforId" label="序号" />
    <el-table-column property="proEarBegin" label="可视耳号" />
    <el-table-column
      property="address"
      label="电子耳号"
      show-overflow-tooltip
    />
    <el-table-column property="varietyName" label="品种" />
    <el-table-column property="gender" label="性别" />
    <el-table-column property="sleepBirthDate" label="出生日期" />
    <el-table-column property="address" label="日龄" />
    <el-table-column property="address" label="月龄" />
    <el-table-column property="address" label="在职状态" />
    <el-table-column property="address" label="阶段" />
    <el-table-column property="address" label="类型" />
    <el-table-column property="cottageTypeName" label="栋舍" />
    <el-table-column property="fieIdName" label="栏位" />
    <el-table-column property="address" label="繁殖状态" />
    <el-table-column property="address" label="是否妊检" />
    <el-table-column property="address" label="状态天数" />
    <el-table-column property="address" label="生产等级" />
    <el-table-column property="address" label="销售等级" />
    <el-table-column property="gradeId" label="基因等级" />
    <el-table-column property="sleepBirthWeight" label="出生重" />
    <el-table-column property="address" label="断奶重" />
    <el-table-column property="address" label="断奶日期">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="address" label="断奶日龄" />
    <el-table-column property="farEarNumber" label="父耳号" />
    <el-table-column property="moEarNumber" label="母耳号" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default>
        <el-button link type="danger" size="small" @click="del()">
          删除
        </el-button>
        <el-button link type="primary" size="small" @click="upd()"
          >修改</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import { ElTable } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
const router = useRouter();
const route = useRoute();
const value1 = ref(''); //日期
const size = ref<'default' | 'large' | 'small'>('default');
//生命周期 钩子函数
onMounted(() => {
  getSheep(); //养只档案-显示
});

//定义变量
const form = reactive({
  proEarBegin: '',
  electronicEarTag: '',
  varietyId: '',
  gender: '',
  sleepBirthDate: '',
  stage: '',
  cottagesId: '',
  fieIdId: '',
  gradeId: '',
  farEarNumber: '',
  moEarNumber: '',
});

//养只档案-显示
const tableData = ref([]);
const getSheep = () => {
  axios
    .get('', {})
    .then((res) => {
      console.log(res);
      tableData.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

const del = (id: any) => {
  ElMessageBox.confirm('确认要删除吗?', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      axios
        .get('')
        .then((res) => {
          console.log(res);
          // if (res.data.data == 1) {
          //   ElMessage.success('删除成功');
          //   getSheep();
          // } else {
          //   ElMessage.error('删除失败');
          // }
        })
        .catch((error) => {
          console.log(error);
        });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      });
    });
};

const upd = (id: any) => {
  
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
